<template>
	<div class="all">
		<div class="top">
			<div class="hei k1">用户</div>
			<div class="inp">
				<van-field v-model="person.nickName" disabled />
			</div>
			<div class="hei k1">原手机号</div>
			<div class="inp" v-if="person.phone != ''">
				<van-field v-model="person.phone" disabled />
			</div>
			<div class="hei k1">手机号</div>
			<div class="inp">
				<van-field v-model="all.phone" placeholder="正常使用可接受验证码的手机号" />
			</div>
			<div class="hei k1">验证码</div>
			<div class="inp">
				<van-field v-model="all.code" placeholder="请输入验证码" />
				<van-button class="inpa" size="small" @click="getcode" :disabled="use">{{countname}}</van-button>
			</div>
			<div class="k2 btn" @click="genggai">绑定手机号</div>
		</div>
		<van-popup v-model="ing">
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
	</div>
</template>

<script>
	import axios from 'axios'
	import bus from '@/assets/bus.js'
	export default {
		name: 'genghuan',
		data() {
			return {
				all: {
					phone:"",
					code:""
				},
				countname:"获取验证码",
				count:30,
				use:false,
				person:"",
				ing:true
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {

			this.getyonghu()
		},
		methods: {
			getyonghu: function() {
				this.axios.get(this.urls + `/mobile/api/getCountInfo`)
					.then(response => {
						this.person = response.data.result
						this.ing = false
					})
			},
			daojishi:function(){
				if(this.all.phone == ''){
					return false
				}
				this.use = true
				this.dao = setInterval(()=>{
					if(this.count > 0){
						this.count --
						this.countname = this.count + '秒后重新获取'
					}else{
						this.count = 30
						this.countname = '获取验证码'
						clearInterval(this.dao)
						this.use = false
					}
				},1000)
			},
			getcode:function(){
				this.axios.post(this.urls + `/mobile/api/getSmsCode?phone=${this.all.phone}`)
					.then(response => {
						
						if(response.data.success == true){
							this.$toast('验证码已发送');
							this.daojishi()
						}else{
							this.$toast(response.data.msg.info);
						}
					})
			},
			genggai: function() {
				if(this.all.phone == '' || this.all.code == ''){
					this.$toast('请输入手机号和验证码');
					return false
				}
				this.axios.post(this.urls + `/mobile/api/bandPhone?code=${this.all.code}&phone=${this.all.phone}`)
					.then(response => {
						
						if(response.data.success == true){
							this.$toast('已绑定手机号');
							setTimeout(() => {
								this.$router.push('/')
							}, 1000)
						}else{
							this.$toast(response.data.msg.info);
						}
					})
			},
		},

	}
</script>

<style scoped lang="less">
	.van-popup{ background: transparent;}
	.van-loading__text{ color: #FFFFFF;}
	.all {
		background: #FFFFFF;
		font-size: 0.28rem;
		min-height: 100vh;

		.top {}

		.k1 {
			margin-bottom: 0.3rem;
		}

		.k3 {
			color: #FF6367;
			margin-bottom: 0.2rem;
		}

		.k2 {
			margin: 0.5rem 0;
		}

		.van-field {
			background: #F7F7F7;
		}

		.red {
			color: #FF6367;
			font-size: 0.28rem;
			margin: 0 0.05rem;
		}

		.inp {
			position: relative;
			margin-bottom: 0.3rem;
		}

		.inpa {
			position: absolute;
			right: 0.1rem;
			top: 7px;
			color: #FFFFFF;
			background: #FFB300;
			padding: 0 0.2rem;
			// border-radius: 0.1rem;
			// font-size: 0.28rem;
			// line-height: 30px;
		}
	}
</style>
